Feature Area
The feature area allows you to create feature static or slider tiles. Each featured area is designed to have a background image, text and button.
Setting options are:
Display location
| Option | Value | Description |
|---|---|---|
| Display location | Option | The display location allows you to set where the feture box will display. Options are Left or Right |
Feature Right
Feature Right
To add a featured element, select the Add Row button.
Note
Featured area can only contain a max of two items.
| Option | Value | Description |
|---|---|---|
| Make slider | True / False | When this option is set, a list of setting will display, allowing you to configure the slider |
Make slider
The options below will be visible when the Make slider option is set to True
Slider Feature box
When a feature box item is set to be a slider a new set of options will be displayed, allowing you to configure the slider. feature box slider options:
Slide Settings
| Option | Value | Description |
|---|---|---|
| Speed | Number | The speed setting allows you to set how fast the slider transition will be between slides. Setting this number in Milliseconds will determine how quickly the transition will be |
| Pause between slides | Number | The pause between slide setting allows you to set how long a slide will pause before moving to the next slide. This number is set in Milliseconds Only valid when auto play is true |
| Slide transition type | Options | The slide transition type allows you to select between Slide or Fade transition types. When set to Slide, the transition will slide between each slide, when set to fade it will cross fade between each slide. |
| Container Height | Number | The height, in pixels of the slider. |
| Auto Play | True / False | When set, the slider will automatically play and transition between each slide. |
Container Height
While the container height can be set to any number, heights over the default 250px may not display correctly or cause display issues. Please ensure the look and feel is correct before publishing
The Slide
| Option | Value | Description |
|---|---|---|
| Background Image | Image | The background image of the slide. Test will display over this image |
| Heading | Text | The heading will be the large text that shows over the slide image |
| Button Text | Text | The button text is what text will display in the button |
| Button Link | URL | The URL the button will map to |
| Background Color | HEX | The background color of the slide when in mobile view |
| Text Color | HEX | The text color for the heading element |
Button color
The color of the buttons set by the global button color option in the theme settings
Basic Feature box
| Option | Value | Description |
|---|---|---|
| Heading | Text | The heading text that will display over the image or slide |
| Button Text | Text | The text that will display in the button |
| Background Image | Image | The image that will display as the background to the featured item. |
| Button URL | URL | The button URL is the URL the button will link to. |
| Button Color | HEX | The button color is the background color of the button |
| Button Text Color | HEX | This will be the color of the text in the button |
| Text Container Width | Number | The text container width allows you to set the width of the containing div. This can be 100% for full width or 50% for half etc. |
| Font Size | Number | This option allows you to set the font size, in pixels of the text area. Allows you to override the default setting. |
Note
When setting a font size, ensure it is still readable for ADA compliance.
Divider Settings
| Option | Value | Description |
|---|---|---|
| Use divider | Yes/No | The container class will add a css class to the main container. This can be any valid css class name use only the classes name |
| Divider Color | HEX Color | The container background color will set the background color of the container. To use, simply select the color picker and select the color. You may also use the HEX input to put in exact colors using their HEX value. |
| Gradient End Color | Hex / Alpha color | The divider, by default, will gradient from the Divider Color to the Gradient End Color. Setting this allows you to set how that transition looks and the alpha (transparency) as well. |
| Divider Type | Option | The divider type has 4 options to choose from |
| Divider Height | Number | This allows you to control the height of the divider. When adding a number here it will override the default divider height. This can be helpful in adjusting the gap between sections |